<template>
  <view class="container">
    <!-- 景点标题 -->
    <view class="header">
      <text class="title">鼓山景区</text>
    </view>
    
    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 景点图片 -->
      <view class="main-image">
        <image src="/static/scenicspot/gs.jpg" mode="aspectFill"></image>
      </view>
      
      <!-- 景点描述 -->
      <view class="description">
        <text class="desc-title">景点简介</text>
        <text class="desc-content">鼓山位于福州市东郊，是福州著名的风景名胜区和佛教圣地。鼓山因山巅有一巨石平展如鼓，每当风雨交加，便发出如鼓的声音，因而得名。鼓山海拔969米，面积约48平方公里，自然风光秀美，人文景观丰富。</text>
        
        <text class="desc-content">鼓山历史悠久，早在南北朝时期就有佛教寺庙建立。山上有涌泉寺、达摩洞、白云洞等众多名胜古迹，其中涌泉寺是福州五大禅林之一，建于五代后梁开平二年（公元908年），是福建最古老的佛教寺院之一。</text>
        
        <text class="desc-content">鼓山的自然风光十分优美，山上林木葱茏，怪石嶙峋，有"石鼓名山"之称。登上山顶，可以俯瞰福州全景，远眺闽江，景色十分壮观。这里是福州人休闲度假的好去处，也是外地游客必游的景点之一。</text>
      </view>
      
      <!-- 景点特色 -->
      <view class="features">
        <text class="section-title">景点特色</text>
        
        <view class="feature-list">
          <view class="feature-item">
            <text class="feature-icon">🏞️</text>
            <text class="feature-text">自然风光秀美</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🏯</text>
            <text class="feature-text">千年古刹涌泉寺</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🖼️</text>
            <text class="feature-text">摩崖石刻群</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">⛰️</text>
            <text class="feature-text">俯瞰福州全景</text>
          </view>
        </view>
      </view>
      
      <!-- 参观信息 -->
      <view class="visit-info">
        <text class="section-title">参观信息</text>
        
        <view class="info-item">
          <text class="info-label">开放时间：</text>
          <text class="info-content">05:30-18:00</text>
        </view>
        <view class="info-item">
          <text class="info-label">门票价格：</text>
          <text class="info-content">景区免费，涌泉寺门票40元</text>
        </view>
        <view class="info-item">
          <text class="info-label">建议游览时间：</text>
          <text class="info-content">4-5小时</text>
        </view>
        <view class="info-item">
          <text class="info-label">交通方式：</text>
          <text class="info-content">乘坐公交7、29、36、40、58、812路等到下院站下车</text>
        </view>
        <view class="info-item">
          <text class="info-label">缆车信息：</text>
          <text class="info-content">单程50元，往返70元</text>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  padding: 30rpx;
  text-align: center;
  background-color: #1A5F7A;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.content {
  flex: 1;
}

.main-image {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.main-image image {
  width: 100%;
  height: 100%;
}

.description {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.desc-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.desc-content {
  display: block;
  font-size: 32rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20rpx;
}

.features {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background-color: rgba(26, 95, 122, 0.05);
  padding: 20rpx;
  border-radius: 10rpx;
}

.feature-icon {
  font-size: 48rpx;
}

.feature-text {
  font-size: 28rpx;
  color: #333;
}

.visit-info {
  padding: 40rpx;
  background-color: #fff;
}

.info-item {
  display: flex;
  margin-bottom: 20rpx;
  line-height: 1.6;
}

.info-label {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  width: 180rpx;
}

.info-content {
  font-size: 32rpx;
  color: #666;
  flex: 1;
}
</style>